window.addEventListener('load', function () {
  let link_reg = document.querySelector('#link_reg')
  let link_login = document.querySelector('#link_login')
  let login_box = document.querySelector('.login-box')
  let reg_box = document.querySelector('.reg-box')
  let regUser = document.querySelector('.reg-box [name="username"]')
  let regpwd = document.querySelector('.reg-box [name="password"]')
  link_reg.addEventListener('click', function () {
    login_box.style.display = 'none'
    reg_box.style.display = 'block'
  })
  link_login.addEventListener('click', function () {
    login_box.style.display = 'block'
    reg_box.style.display = 'none'
  })
  // 校验用户名和密码
  layui.use('form', function () {
    var form = layui.form;

    //监听提交
    form.verify({
      username: function (value, item) { //value：表单的值、item：表单的DOM对象
        if (!(/^[a-zA-Z0-9_-]{2,16}$/.test(value))) {
          return '用户名必须2-16位且不能为中文'
        }
        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
          return '用户名不能有特殊字符';
        }
        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
          return '用户名首尾不能出现下划线\'_\'';
        }
        // if (/^\d+\d+\d$/.test(value)) {
        //   return '用户名不能全为数字';
        // }
        //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
        if (value === 'xxx') {
          alert('用户名不能为敏感词');
          return true;
        }
      }
      , pwd: function (value) {
        if (!(/^[\S]{6,12}$/.test(value))) {
          return '密码必须6到12位，且不能出现空格'
        }
        // if (/^\d+\d+\d$/.test(value)) {
        //   return '密码不能全为数字'
        // }
        if (/^[a-zA-Z-_]+$/.test(value)) {
          return '密码不能全为字母'
        }
        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
          return '密码首尾不能出现下划线\'_\'';
        }
        if (/(^\-)|(\--)|(\-+$)/.test(value)) {
          return '密码首尾不能出现连接符\'-\'';
        }
      },
      repwd: function (value) {
        if (value !== regpwd.value) {
          return '两次密码不相同'
        }
      }
    });
    // 注册
    form.on('submit(*)', function (data) {
      console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
      console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      axios.post('/api/reguser', `username=${data.field.username}&password=${data.field.password}`)
        .then(res => {
          layer.msg('注册成功');
        })
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
    // 登录
    form.on('submit(#)', function (data) {
      axios.post('/api/login', `username=${data.field.username}&password=${data.field.password}`)
        .then(res => {
          console.log(res);
          if (res.data.status !== 0) {
            return layer.msg('登录失败');
          }
          layer.msg('登录成功');
          localStorage.setItem('token', res.data.token)
          location.assign('http://127.0.0.1:8080/')
        })
      return false
    });
  });
})